<template>
  <div id="quotationInfo">
    <div class="nav">
      <span
        @click="$router.push(`/quotation`)"
        style="font-size: 0.36rem;font-weight: bold;color: #40404c;margin-right:.2rem;"
      >
        <van-icon name="arrow-left" />
      </span>
      <span class="active">{{bi}}/{{biz}}</span>
    </div>
    <div class="rootMain">
      <div class="quotation-box">
        <div class="qb-top">
          <div class="qbt-left" @click="showPop">
            <i class="iconfont icon-cebianlandanchu"></i>
            <h4>{{bi}} / {{biz}}</h4>
          </div>
          <div class="qbt-right">
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-hangqing" @click="goQuotionInfo(0)"></i>
          </div>
        </div>
        <div class="qb-con">
          <div class="qbc-left">
            <div class="qbc-nav">
              <h2 :class="['line-up',bORs==1?'active':'']" @click="tradeType(1)">买入</h2>
              <h2 :class="['line-down',bORs==2?'active':'']" @click="tradeType(2)">卖出</h2>
            </div>
            <div class="qbc-item">
              <div class="input-box">
                <input
                  type="number"
                  placeholder="价格"
                  v-model="price"
                  @keyup="computedTrade('price')"
                />
              </div>
              <!-- <label>≈￥{{price}}</label> -->
              <label></label>
              <div class="input-box">
                <input type="number" placeholder="数量" v-model="num" @keyup="computedTrade('num')" />
                <b>{{bi}}</b>
              </div>
              <p v-if="bORs == 1">
                <span>可用 {{userObj.cnnAmount}}</span>
                <span>{{biz}}</span>
              </p>
              <p v-else>
                <span>可用 {{userObj.ethAmount}}</span>
                <span>{{bi}}</span>
              </p>
              <div class="btn-box">
                <div @click="option(1)">1/4</div>
                <span></span>
                <div @click="option(2)">1/2</div>
                <span></span>
                <div @click="option(3)">全选</div>
              </div>
              <div class="trade">
                交易额
                <span v-if="!tradePrice">-</span>
                <span v-else>{{tradePrice}}</span>
                <span>{{biz}}</span>
              </div>
              <div
                :class="['btn',disabled?'': bORs==1? 'bg-up':bORs ==2?'bg-down':'']"
                @click="disabled?tradeCoin(0): tradeCoin(bORs)"
              >{{bORs==1?'买入':'卖出'}}{{bi}}</div>
              <!-- <div
                :class="['btn',bORs==2? 'bg-down':'']"
                v-else-if="bORs ==2"
                @click="tradeCoin(2)"
              >卖出VC</div>-->
            </div>
          </div>
          <div class="qbc-right">
            <div class="qbc-nav">
              <span>盘口</span>
              <span>价格</span>
              <span>数量</span>
            </div>
            <div class="qbc-list line-down">
              <div class="qbc-list line-down" v-if="sellList.length<5">
                <div
                  class="qbcl-item"
                  style="background-size:0% 100%"
                  v-for="(e,i) in 5-sellList.length"
                  :key="i"
                >
                  <span>{{5-i}}</span>
                  <span>-</span>
                  <span>-</span>
                </div>
              </div>
              <div
                class="qbcl-item"
                :style="e.count"
                v-for="(e,i) in sellList"
                :key="i"
                @click="selectPrice(e)"
              >
                <span>{{sellList.length -i}}</span>
                <span>{{e[0]}}</span>
                <span>{{e[1] | toFixed4}}</span>
              </div>
            </div>

            <div class="dayquotation line-up" v-if="ratio>0">
              <h4>
                {{newprice}}
                <small>{{ratio}}%</small>
              </h4>
              <!-- <label>≈￥0.00</label> -->
            </div>
            <div class="dayquotation line-down" v-else>
              <h4>
                {{newprice}}
                <small>{{ratio}}%</small>
              </h4>
              <!-- <label>≈￥0.00</label> -->
            </div>
            <div class="qbc-list line-up">
              <div
                class="qbcl-item"
                :style="e.count"
                v-for="(e,i) in buyList"
                :key="i"
                @click="selectPrice(e)"
              >
                <span>{{i+1}}</span>
                <span>{{e[0]}}</span>
                <span>{{e[1] | toFixed4}}</span>
              </div>
            </div>
            <div class="qbc-list line-up" v-if="buyList.length<5">
              <div
                class="qbcl-item"
                style="background-size:0% 100%"
                v-for="(e,i) in 5-buyList.length"
                :key="i"
              >
                <span>{{buyList.length+i+1}}</span>
                <span>-</span>
                <span>-</span>
              </div>
            </div>
            <div class="qbc-more">
              <span>更多</span>
              <div class="select-group" @click="showSelect=!showSelect">
                <span>深度</span>
                <i class="iconfont icon-down-fill"></i>
                <div class="select-option" v-show="showSelect">
                  <p @click.stop="selectOption(0)">深度 0</p>
                  <!-- <p>深度 1</p>
                  <p>深度 2</p>
                  <p>深度 3</p>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="qb-bottom">
          <div class="qbb-header">
            <h2>当前委托</h2>
            <span
              @click="bi=='ETH'?$router.push(`/quotationHistoryHuobi?s=${$route.query.s}`):$router.push(`/quotationHistoryHuobi`)"
            >委托历史</span>
            <!-- <span @click="$router.push(`/quotationHistoryHuobi`)">委托历史</span> -->
          </div>
          <div class="qbb-list">
            <ul v-if="tradeList.length>0">
              <van-list
                v-model="loading"
                :loading-text="$t('m.loading')"
                :offset="100"
                :finished-text="$t('m.noMore')"
                :finished="finished"
                @load="onLoad"
              >
                <li
                  v-for="(e,i) in tradeList.filter(obj=>obj.tradeState ==1)"
                  :key="i"
                  @click="$router.push(`/quotationDetailHuobi?id=${e.id}&s=${$route.query.s}`)"
                >
                  <div class="qbbl-header">
                    <h4>
                      <b class="bg-up" v-if="e.tradeType ==1">买</b>
                      <b class="bg-down" v-else>卖</b>
                      <span>
                        {{bi}}
                        <small>/{{biz}}</small>
                      </span>
                      <label>{{e.createTime}}</label>
                    </h4>
                    <span class="qbbl-btn" @click.stop="cancelTrade(e.id)">撤单</span>
                  </div>
                  <div class="qbbl-info">
                    <p>
                      <span>委托总量</span>
                      {{e.tradeAmount}} {{bi}}
                    </p>
                    <p>
                      <span>委托价格</span>
                      {{e.tradePrice}} {{biz}}
                    </p>
                    <p>
                      <span>已成交量</span>
                      0 {{bi}}
                    </p>
                    <p>
                      <span>成交均价</span>
                      {{e.dealPrice}} {{biz}}
                    </p>
                  </div>
                </li>
              </van-list>
            </ul>
            <p v-else>暂无记录</p>
          </div>
        </div>
      </div>
      <van-popup v-model="show" position="left" :style="{ height: '20%' }" />
    </div>
  </div>
</template>
<script>
import pako from "pako";
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: "",
      collect: false,
      show: false,
      showSelect: false,
      bORs: 1, //1 买  2 卖
      buyList: "",
      sellList: "",
      price: "",
      num: "",
      availableAmount: "", // 可用CNN余额
      availableAmount2: "", // 可用ETH
      newprice: "-", //最新成交价
      ratio: "", //比率
      tradePrice: "", //交易额
      tradeList: [], //委托记录
      timer: "",
      bi: "",
      biz: "",
      disabled: false,
      // 使用websocket请求火币平台数据
      websock: null,
      bids: [],
      asks: [],
      s: "",
      usdtCny: "",
      pageNum: 0,
      pageSize: 10,
      total: 0,
      loading: false,
      finished: false
    };
  },
  filters: {
    toFixed2(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        // 截取当前数据到小数点后*位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = "--";
      }
      return realVal;
    },
    toFixed4(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        // 截取当前数据到小数点后*位
        realVal = parseFloat(value).toFixed(4);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  },
  created() {
    this.getConfig();
    let bi_biz = this.$route.query.s.toUpperCase().split("_");
    this.s = this.$route.query.s.replace("_cnn", "usdt");
    this.bi = bi_biz[0];
    this.biz = bi_biz[1];
    if (this.$route.query.t == 1) {
      this.bORs = 1;
    } else {
      this.bORs = 2;
    }
    if (this.bi == "BTC" || this.bi == "EOS") {
      this.disabled = true;
    }
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.userObj = localStorage.getItem("userObj")
      ? JSON.parse(localStorage.getItem("userObj"))
      : "";
    if (!this.loginToken) {
      this.$router.push(`/login`);
      sessionStorage.setItem("loginBack", true);
      return;
    }
    // deling 11 这里应该使用socket保持长链接
    // this.getmarketDepth();
    // this.getnewPrice();
    if (this.loginToken) {
      if (this.disabled) {
        return;
      } else {
        this.getUser();
        this.getTradeList();
      }
    }
    // this.timer = setInterval(res => {
    //   this.getmarketDepth();
    //   this.getnewPrice();
    //   if (this.loginToken) {
    //     this.getUser();
    //     this.getTradeList();
    //   }
    // }, 5000);
  },
  computed: {
    // ratioSell: function() {
    //   let tatio = "";
    //   this.sellList.forEach(function(e) {
    //     tatio = "background-size:" + e[1] + "% 100%";
    //   });
    //   return tatio;
    // },
    // ratioBuy: function() {
    //   let tatio = "";
    //   this.buyList.forEach(function(e) {
    //     tatio = "background-size:" + e[1] + "% 100%";
    //   });
    //   return tatio;
    // }
    // tradeListFn: function() {
    //   this.tradeList.filter(function(e) {
    //     // console.log(e);
    //     return e;
    //   });
    // }
  },
  methods: {
    getConfig() {
      Services.getConfig().then(res => {
        if (res.code == "0000") {
          this.usdtCny = res.usdtCny;
          this.initWebSocket(); // 获取火币平台数据
        } else {
          Toast(res.msg);
        }
      });
    },
    // 使用websocket请求火币平台数据
    initWebSocket() {
      //初始化weosocket
      const wsuri = "wss://api.huobiasia.vip/ws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      console.log(this.s);
      let from = {
        sub: "market." + this.s + ".depth.step0",
        symbol: this.s,
        step: 0,
        pick: ["asks.5", "bids.5"]
      };
      let from1 = { sub: "market." + this.s + ".detail", symbol: this.s };

      this.websocketsend(JSON.stringify(from));
      this.websocketsend(JSON.stringify(from1));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(evt) {
      //数据接收
      let _that = this;
      if (evt.data instanceof Blob) {
        let result = "";
        let reader = new FileReader();
        //FileReader：从Blob对象中读取数据
        reader.onload = function() {
          result = JSON.parse(
            pako.inflate(reader.result, {
              to: "string"
            })
          );
          // console.log(result);
          // 如果是深度列表就处理下数据
          if (result.ch == "market." + _that.s + ".depth.step0") {
            result.tick.bids.forEach(element => {
              element.count = "background-size:" + element[1] * 100 + "% 100%";
              element[0] = (element[0] * _that.usdtCny).toFixed(2);
            });
            result.tick.asks.forEach(element => {
              element.count = "background-size:" + element[1] * 100 + "% 100%";
              element[0] = (element[0] * _that.usdtCny).toFixed(2);
            });
            _that.buyList = result.tick.bids;
            _that.sellList = result.tick.asks.reverse();
          }
          if (result.ch == "market." + _that.s + ".detail") {
            _that.newprice = (result.tick.close * _that.usdtCny).toFixed(3);
            _that.ratio = (
              ((result.tick.close - result.tick.open) / result.tick.close) *
              100
            ).toFixed(2);
          }

          //pako.inflate()对数据进行解压，得到正常的json对象
          if (result.ping) {
            _that.websocketsend(
              JSON.stringify({
                pong: result.ping
              })
            );
            //响应服务器，避免断开连接
          }
        };
        reader.readAsBinaryString(evt.data);
        //将返回的数据解析为字符串格式
      }
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    // other
    getUser() {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
          this.availableAmount = this.userObj.cnnAmount;
          this.availableAmount2 = this.userObj.ethAmount;
        } else {
          Toast(res.msg);
        }
      });
    },
    showPop() {
      Toast("敬请期待");
      // this.show = true;
    },
    // 选择交易价格
    selectPrice(e) {
      console.log(e);
      this.price = e[0];
    },
    tradeType(index) {
      this.bORs = index;
      this.price = "";
      this.num = "";
      this.tradePrice = "";
    },
    subNum(num) {
      let _num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      _num = _num.replace(/^\./g, ""); //验证第一个字符是数字而不是.
      _num = _num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      _num = _num
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      _num = _num.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      return _num;
    },
    // 手动输入计算交易额
    computedTrade(type) {
      if (type == "price") {
        if (!this.num) {
          this.tradePrice = "";
          return;
        }
      } else {
        // 如果未输入价格获取最新价格
        if (!this.price) {
          this.price = this.newprice;
        }
      }
      this.tradePrice = (this.num * this.price).toFixed(3);

      console.log(this.price);
      console.log(this.num);
      // if (optionVal) {
      //   if (this.bORs == 1) {
      //     this.num = this.availableAmount * optionVal;
      //   } else {
      //     this.num = this.availableAmount2 * optionVal;
      //   }
      // } else {
      //   // this.subNum(option);
      //   console.log("111");
      //   // th
      // }
    },

    // 直接选择比例计算交易额
    option(index) {
      // 如果未输入价格获取最新价格
      console.log(this.usdtCny);
      if (!this.price) {
        this.price = this.newprice;
      }
      if (this.bORs == 1) {
        // 买入
        if (index == 1) {
          this.num = ((this.availableAmount * 0.25) / this.price).toFixed(4);
        } else if (index == 2) {
          this.num = ((this.availableAmount * 0.5) / this.price).toFixed(4);
        } else {
          this.num = (this.availableAmount / this.price).toFixed(4);
        }
      } else {
        // 卖出
        if (index == 1) {
          this.num = (this.availableAmount2 * 0.25).toFixed(4);
        } else if (index == 2) {
          this.num = (this.availableAmount2 * 0.5).toFixed(4);
        } else {
          this.num = this.availableAmount2.toFixed(4);
        }
      }
      this.tradePrice = (this.num * this.price).toFixed(3);
    },
    // 买入 卖出
    tradeCoin(type) {
      if (type == 0) {
        Toast("当前币种暂时无法交易");
        return;
      }
      if (!this.price) {
        Toast("请输入价格");
        return;
      }
      if (this.price <= 0) {
        Toast("请输入正确的价格");
        return;
      }
      if (!this.num) {
        Toast("请输入数量");
        return;
      }
      if (this.num <= 0) {
        Toast("请输入正确的数量");
        return;
      }
      if (this.bORs == 1) {
        console.log(
          "买入费用：" + this.price * this.num,
          "余额：" + this.availableAmount
        );
        if (this.price * this.num > this.availableAmount) {
          Toast("可用余额不足");
          return;
        }
      } else {
        console.log("卖出数量：" + this.num, "余额：" + this.availableAmount2);
        if (this.num > this.availableAmount2) {
          Toast("可用余额不足");
          return;
        }
      }
      Services.huobiTrade({
        token: this.loginToken,
        tradeType: type,
        tradePrice: this.price,
        tradeAmount: this.num
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          Toast("委托成功");
          this.price = "";
          this.num = "";
          this.tradePrice = "";
          this.reset();
          this.getTradeList();
          this.getUser();
        } else {
          Toast(res.msg);
        }
      });
    },

    // 添加自选
    addCollect() {
      this.collect = !this.collect;
    },
    goQuotionInfo(id) {
      this.$router.push(
        `/quotationInfoHuobi?s=${this.$route.query.s}&coin=${id}`
      );
    },
    selectOption(item) {
      this.showSelect = false;
    },
    // 市场深度
    getmarketDepth() {
      Services.marketDepth().then(res => {
        console.log(res);
        if (res.code == "0000") {
          this.buyList = res.buyList;
          this.sellList = res.sellList;
        }
      });
    },
    // 最新成交价
    getnewPrice() {
      Services.newPrice().then(res => {
        console.log(res);
        if (res.code == "0000") {
          this.newprice = res.vcPrice.toFixed(2);
          this.ratio = res.percent;
        }
      });
    },
    reset() {
      this.tradeList = [];
      this.pageNum = 0;
      this.total = 0;
      this.loading = true;
      this.finished = false;
    },
    onLoad() {
      setTimeout(() => {
        if (this.pageNum != 0 && this.pageNum * 10 >= this.sum) {
          this.finished = true;
          return;
        }
        this.getTradeList();
      }, 500);
    },
    // 委托记录
    getTradeList() {
      this.pageNum = this.pageNum + 1;
      Services.huobiGetTradeList({
        token: this.loginToken,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          res.list.forEach((element, index) => {
            if (element.tradeState == 2) {
              res.list.splice(index, 1);
            }
            // if (element.tradedCnn == 0) {
            //   return;
            // }
            // element.tradedCnn = (element.tradedCnn / element.tradedVc).toFixed(2);
          });
          console.log("__________");
          console.log(res.list);
          this.tradeList = this.tradeList.concat(res.list);
          this.total = res.page.total;
          this.loading = false;
          // 数据全部加载完成  停止懒加载
          if (this.pageNum * 10 >= this.total) {
            this.finished = true;
            // console.log("加载完成");
          }
        } else {
          this.loading = false;
          this.finished = true;
          Toast(res.msg);
        }
      });
    },
    cancelTrade(id) {
      Services.huobiCancelTrade({
        token: this.loginToken,
        id: id
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          Toast("撤单成功");
          this.reset();
          this.getTradeList();
          this.getUser();
        } else {
          Toast(res.msg);
        }
      });
    }
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#quotationInfo {
  height: 100%;

  .nav {
    padding: 0 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    z-index: 999;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #40404c;
      }
    }
  }
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: auto;
    input {
      -webkit-appearance: none;
      width: 100%;
      height: 1rem;
      border: 1px solid #c5cfd5;
      padding: 0 0.2rem;
      font-size: 0.32rem;
      font-weight: 700;
      box-sizing: border-box;
    }
    ::-webkit-input-placeholder {
      color: #c5cfd5;
    }
    .quotation-box {
      color: #1f3f59;
      height: 100%;
      .qb-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1rem;
        padding: 0 0.3rem;
        .qbt-left {
          display: flex;
          align-items: center;
          i {
            font-size: 0.26rem;
            margin-right: 0.2rem;
          }
          h4 {
            font-size: 0.24rem;
            font-weight: bold;
          }
        }
        .qbt-right {
          i {
            margin: 0 0.1rem;
          }
        }
      }
      .qb-con {
        display: flex;
        padding-bottom: 0.2rem;
        border-bottom: 0.2rem solid #f7f7fb;
        .qbc-nav {
          display: flex;
          height: 0.7rem;
          h2 {
            font-size: 0.4rem;
            border-bottom: 0.04rem solid transparent;
            font-weight: 700;
            padding-bottom: 0.1rem;
            margin-right: 0.6rem;
            &.line-up.active {
              border-color: #03ad8f;
            }
            &.line-down.active {
              border-color: #d14b64;
            }
          }
        }
        .qbc-item {
          margin-top: 0.2rem;
          .input-box {
            width: 100%;
            position: relative;
            b {
              position: absolute;
              right: 0.2rem;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          > label,
          > p {
            display: block;
            height: 0.6rem;
            padding-top: 0.1rem;
            color: #1f3f59;
            font-size: 0.22rem;
          }
          > label {
            font-size: 0.2rem;
            color: #c5cfd5;
          }
          > p {
            display: flex;
            justify-content: space-between;
          }
          .btn-box {
            border: 1px solid #c8cfd5;
            height: 0.6rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            div {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #8c9fad;
              width: 33.333333%;
              height: 0.58rem;
              font-size: 0.24rem;
            }
            span {
              width: 1px;
              height: 0.3rem;
              background: #e7ebee;
            }
          }
          .trade {
            padding-top: 0.5rem;
            color: #8c9fad;
            span {
              color: #1f3f59;
            }
          }
          .btn {
            width: 100%;
            height: 0.88rem;
            border-radius: 0;
            font-weight: bold;
          }
        }
        .qbc-left {
          width: 50%;
          padding-left: 0.3rem;
        }
        .qbc-right {
          width: 50%;
          padding-left: 0.3rem;
          .qbc-nav {
            justify-content: space-around;
            span {
              width: 30%;
              &:nth-of-type(3) {
                width: 40%;
                padding-right: 0.3rem;
                text-align: right;
              }
            }
          }
          .qbc-list {
            .qbcl-item {
              height: 0.48rem;
              display: flex;
              justify-content: space-around;
              align-items: center;
              // background-repeat: no-repeat;
              background-position: 0;
              background-size: 0 0;
              span {
                font-weight: normal;
                font-size: 0.22rem;
                width: 30%;
                &:nth-of-type(1) {
                  width: 10%;
                }
                &:nth-of-type(3) {
                  width: 60%;
                  text-align: right;
                  padding-right: 0.1rem;
                  color: #94a6b3;
                }
              }
            }
            &.line-up {
              color: #03ad8f;
              .qbcl-item {
                background: linear-gradient(#f0faf9, #f0faf9) no-repeat;
              }
            }
            &.line-down {
              color: #d14b64;
              .qbcl-item {
                background: linear-gradient(#fdf5f6, #fdf5f6) no-repeat;
              }
            }
          }
          .dayquotation {
            height: 0.75rem;
            h4 {
              padding-top: 0.1rem;
              font-size: 0.33rem;
              small {
                font-size: 0.22rem;
              }
            }
            label {
              margin-top: -0.05rem;
              font-size: 0.2rem;
              color: #c5cfd5;
              display: block;
            }
          }
          .qbc-more {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 0.3rem;
            height: 0.4rem;
            color: #8c9fad;
            font-size: 0.24rem;
            .select-group {
              position: relative;
              span {
                padding-left: 0.1rem;
              }
              i {
                font-size: 0.2rem;
                color: #8c9fad;
              }
              .select-option {
                position: absolute;
                top: 0.45rem;
                left: 0;
                width: 100%;
                border: 1px solid #c5cfd5;
                p {
                  height: 0.45rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #fefefe;
                }
              }
            }
          }
        }
      }
      .qb-bottom {
        padding: 0 0.3rem;
        .qbb-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 1.2rem;
          h2 {
            font-size: 0.4rem;
            font-weight: 0;
          }
        }
        .qbb-list {
          ul {
            li {
              border-bottom: 1px solid #f7f7fb;
              margin-bottom: 0.2rem;
              .qbbl-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 0.65rem;
                h4 {
                  display: flex;
                  align-items: center;
                  b {
                    width: 0.4rem;
                    height: 0.4rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 0.04rem;
                    color: #fff;
                  }
                  span {
                    margin: 0 0.3rem 0 0.2rem;
                    font-size: 0.32rem;
                    small {
                      font-size: 0.28rem;
                      opacity: 0.8;
                    }
                  }
                  label {
                    font-size: 0.2rem;
                    color: #c5cfd5;
                  }
                }
                .qbbl-btn {
                  width: 1rem;
                  height: 0.55rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 0.26rem;
                  background: transparent;
                  color: #1f3f59;
                  border: 1px solid #1f3f59;
                  border-radius: 1rem;
                }
              }
              .qbbl-info {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                p {
                  width: 50%;
                  height: 0.55rem;
                  display: flex;
                  align-items: center;
                  font-size: 0.22rem;
                  span {
                    font-size: 0.24rem;
                    opacity: 0.9;
                    margin-right: 0.2rem;
                  }
                }
              }
            }
          }
          > p {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 3rem;
            color: #c5cfd5;
            font-size: 0.22rem;
          }
        }
      }
    }
  }
}
</style>